<template>
    <transition name='fade'>
        <div class="component-go-home" v-show='showHome && goHome' @click='goUser'>
            <div class="component-go-home__box">
                <img src="../images/menu_home-active@3x.png" alt="">
            </div>
        </div>
    </transition>
</template>

<script>
    import  { mapGetters, mapActions }  from 'vuex'
    import { getQueryString } from '../utils/utils'

    export default {
        props: {

        },
        data(){
            return {
                routerLinks:[{
                    name:'loan-in-index',
                },{
                    name:'loan-out-index',
                },{
                    name:'contact-index',
                },{
                    name:'user-index',
                }],
                showHome:false
            }
        },
        computed:{
            ...mapGetters([
                'localInfo'
            ]),
            goHome(){
                return this.localInfo.goHome
            },
        },
        methods:{
            goUser(name){
                this.$router.push({
                    name:'user-index'
                })
            },
            init(){
                if(getQueryString().from == 'app') return

                let links = this.routerLinks
                let isShow = true
                _.each(links,(value,index)=>{
                    if(value.name == this.$route.name || this.$route.name == 'default'){
                        isShow = false
                        return false
                    }
                })
                // console.log(isShow)
                this.showHome = isShow
            },
        },
        created() {
            this.init()
        },
        watch: {
            $route (newVal,oldVal){
                this.init()
            }
        }
    }
</script>

<style lang="scss">
    @import "../sass/_variables";
    @import "../sass/_extends";
    @import "../sass/_mixins";
    
    .component-go-home{
        position: absolute;
        bottom:15%;
        right:12px;
        padding:12px;
        z-index:$zIndex_home;
    }
    .component-go-home__box{
        opacity:.4;
        background: #FFFFFF;
        border: 0 solid rgba(0,0,0,0.12);
        box-shadow: 0 0 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.12);
        padding:6px;
        border-radius:50%;
        transition:all ease 150ms;
        &:active{
            background-color: darken(#fff,10%);
            opacity:1;
        }
        img{
            border-radius:50%;
            width: 24px;
            height:24px;
        }
    }

</style>
